@use '@/assets/styles/variables.scss';
@use '@/assets/styles/mixin.scss';

.lc-divider-wrapper {
  width: 100%;
  padding-top: 10px;
}

.lc-divider {
  @include mixin.createCssDividerStyles('&');
  @include mixin.createCssDividerPaddingInlineAndMarginStyles('& .lc-divider__legend');

  .lc-divider__legend {
    padding-inline-start: 0;
    padding-inline-end: 0;
    min-height: 15px;
  }
  & {
    border-width: 1px;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    width: 100%;
    box-sizing: border-box;
    margin-inline: 0;
    padding-bottom: 0;
    padding-inline-start: 0;
    padding-inline-end: 0;
  }
}

.lc-image {
  // width: var(--width, 50px);
  // height: var(--height, 50px);
  width: 50px;
  height: 50px;
  vertical-align: middle;
  @include mixin.createCssFromStyles('&.el-image');
}
.image-slot {
  font-size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #f5f7fa;
  color: #909399;
}

.lc-link {
  @include mixin.createCssFromStyles('&.el-link');
}

.lc-pagination {
  @include mixin.createCssFromOutsideBasicStyles('&.el-pagination');
  &__txt {
    color: #606266;
    font-weight: normal;
  }
  &.is-background {
    ::v-deep .el-pager {
      li {
        border: 1px solid var(--text-color-4);
        background-color: var(--component-background-color);
        border-radius: 2px;
      }
    }
    ::v-deep .btn-prev {
      border: 1px solid var(--text-color-4);
      background-color: var(--component-background-color);
    }
    ::v-deep .btn-next {
      border: 1px solid var(--text-color-4);
      background-color: var(--component-background-color);
    }
  }
  ::v-deep li {
    min-width: 30px;
    &.active {
      background-color: var(--active-block-bg-color);
      color: var(--text-color-inverse);
      border-radius: 2px;
      border-color: transparent !important;
    }
  }
  &__mini {
    line-height: 48px;
    .el-button--text {
      color: var(text-color-3);
    }
    .el-input {
      width: 50px !important;
      ::v-deep .el-input__inner {
        height: 28px;
      }
    }
    span {
      display: inline-block;
      margin: 0 10px;
      font-size: 14px;
    }
  }
  &__jump {
    font-size: 14px;
    color: var(--text-color-1);
    font-weight: normal;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100px;
    margin-left: 5px;
    > .el-input {
      width: 40px;
      height: 32px;
    }
  }
  &-sizer {
    font-size: 14px;
    color: var(--text-color-1);
    font-weight: normal;
    display: inline-block;
    display: flex;
    align-items: center;
    .el-select,
    .el-input,
    .el-input__inner {
      width: 60px !important;
    }
  }
  &__simple {
    .el-pagination {
      .el-pager {
        li:not(.disabled).active.active {
          background-color: var(--primary-bg-color);
        }
        li {
          background-color: var(--block-bg-color);
          border: none;
        }
      }
      .btn-prev,
      button,
      .btn-next {
        background-color: var(--block-bg-color);
        border: none;
      }
    }
  }
}

.lc-rower.lc-pagination__mini {
  span {
    margin: 0 10px;
    color: var(--text-color-1);
    font-size: 14px;
  }
  .el-input {
    width: 50px;
    .el-input__inner {
      width: 50px;
      height: 28px;
      padding: 0 2px;
      text-align: center;
    }
  }
  button {
    color: var(--text-color-1);
    font-size: 16px;
  }
  .button-disabled {
    color: var(--disabled-color);
  }
}

.lc-popover {
  @include mixin.createCssFromStyles('&');
}

$progress-style-list: mixin.$width-height-style, mixin.$margin-padding-style, mixin.$background-style, mixin.$border-style,
mixin.$box-shadow-style;
.lc-progress {
  min-width: 126px;
  @include mixin.createCssByAttributesGroupImportant('& .el-progress-circle', $progress-style-list...);
  @include mixin.createCssByAttributesGroupImportant('&.el-progress--line', $progress-style-list...);
  @include mixin.createCssByAttributesGroupImportant('&.el-progress .el-progress__text', mixin.$font-style);
}

.lc-svg-icon {
  @include mixin.createCssFromStyles('&.lc-svg-icon');
 
  &:hover {
    cursor: pointer;
  }
  &{
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
}
.lc-menu {
  @include mixin.createCssByAttributes('&.el-menu', width);
}
.lc-calendar {
  @include mixin.createCssFromStyles('&.el-calendar');
}
